<template>
  <view>
    <view class="map">
      <map style="width: 100%; height: 574rpx;" :longitude="Number(infoDetail.longitudeEnd)"
           :latitude="Number(infoDetail.latitudeEnd)"
           :markers="markers">
      </map>
    </view>
    <!-- 图标 -->
    <!-- 	<view class="location">
      <image src="../../../static/img/map/my_location.png" mode=""></image>
    </view> -->
    <view class="mission">
      <view class="mission-div">
        <DictTag :dict-value="getDict(DictEnum.IOT_REPORT)" :value="infoDetail.tiringType"></DictTag>
        <view class="">{{ infoDetail.tiringFloor }}层</view>
      </view>

    </view>
    <view class="mt20">
      <uni-card>
        <view class="">
          <!-- 纵向排列 -->
          <!-- <uni-steps :options="[
          {title:'接收任务',desc:'2020-11-02 22:45:11'},
          {title:'到达现场',desc:'2018-11-12 22:45:11'},
          {title:'完成救援',desc:'2018-11-13 22:45:11'},
          {title:'确认完成',desc:'2018-11-14 22:45:11'}
        ]"
         direction="column" :active="2">
         </uni-steps> -->
          <view class="steps">
            <tm-timeline>
              <tm-timeline-item v-for="record in infoDetail.rescueRecordList" color="green" :size="32" type="fill"
                                icon="tmicon-check" :time="record.createTime">
                <tm-sheet no-level :shadow="2" :round="3" :margin="[0, 10]">
                  <tm-text
                      :label=record.remark
                  ></tm-text>
                </tm-sheet>
              </tm-timeline-item>
            </tm-timeline>
          </view>
        </view>
      </uni-card>
    </view>

  </view>
</template>

<script>
import {getElevatorTiring} from "@/api/iot/elevatorTiring";
import {getDict} from "@/utils/dict";
import {DictEnum} from "@/enums/dictEnum";

export default {
  computed: {
    DictEnum() {
      return DictEnum
    }
  },
  data() {
    return {
      lineNum: 0,
      list: [],
      markers: [],

      tiringId: "",
      infoDetail: {},
    }
  },
  onLoad(e) {
    this.tiringId = e.tiringId;
    this.getTringInfo()
  },
  methods: {
    getDict,
    async getTringInfo() {
      const res = await getElevatorTiring(this.tiringId);
      this.infoDetail = res
      this.markers = [{
        id: 235,
        latitude: Number(res.latitudeEnd),
        longitude: Number(res.longitudeEnd),
        iconPath: "/static/image/map/my_location.png",
      }]

    }
  }
}
</script>

<style scoped>
.uni-card {
  width: 670rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
  border-radius: 16rpx;
  border: none;
  margin: 0 auto;
}

/* 定位 */
.location {
  position: fixed;
  top: 360rpx;
  left: 341rpx;
}

.location image {
  vertical-align: middle;
  width: 40rpx;
  height: 72rpx;
}

/* 内容头部 */
.mission {
  width: 750rpx;
  height: 80rpx;
  background: #FF5753;
  box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(255, 87, 83, 0.1);

}

.mission-div {
  width: 670rpx;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}

.mission-div view {
  padding: 0 15rpx;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #FFFFFF;

}

.steps {
  /* width: 670rpx; */
  /* height: 750rpx; */
  background-color: #FFFFFF;
}

.steps:active {
  color: #3AC211;
  background-color: #3AC211;
}

.steps .steps_item .s_l .info_item uni-text[data-v-61839b2c] {
  font-size: 12px;
  font-weight: 500;
  color: #333333;
  line-height: 25px;
}

.mt20 {
  margin-top: 20px;
}
</style>
